<template>
  <el-container>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" label-position="left" class="demo-ruleForm" size="small">
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="保证金" prop="promise_money">
        <el-input v-model="ruleForm.promise_money"></el-input>
      </el-form-item>

      <el-form-item label="接单最大金额" prop="money">
        <el-input v-model="ruleForm.money"></el-input>
      </el-form-item>

      <el-form-item label="接单最大数量" prop="num">
        <el-input v-model="ruleForm.num"></el-input>
      </el-form-item>

      <el-form-item label="描述">
        <quill-editor
          v-model="ruleForm.des">
        </quill-editor>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
        <el-button @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    mounted() {
      let _this = this;
      var attrs = this.$attrs;
      if (attrs.methodType == this.constant.EDITORMETHOD) {
        this.api.getPromiseMoneyRule({
          id: attrs.id
        }).then(function (res) {
          if (res.code == 1) {
            _this.ruleForm = res.data;
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    },
    methods: {
      goBack: function () {
        this.$router.go(-1)
      },
      submitForm(formName) {
        let _this = this;
        let attrs = this.$attrs;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (attrs.methodType == this.constant.EDITORMETHOD) {
              _this.api.updatePromiseMoneyRule(_this.ruleForm).then(function (res) {
                if (res.code == 1) {
                  _this.goBack();
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success',
                  });
                } else {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'warning'
                  });
                }
              }).catch(function (error) {
                throw new Error(error);
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    data() {
      return {
        ruleForm: {
          id:null,                //类型：Number  必有字段  备注：无
          promise_money:"",                //类型：String  必有字段  备注：保证金
          des:"",                //类型：String  必有字段  备注：描述
          money:"",                //类型：String  必有字段  备注：接单最大金额
          num:"",                //类型：String  必有字段  备注：接单最大数量
          name:""                //类型：String  必有字段  备注：保证金名称
        },
        rules: {
          name: [
            {required: true, message: '请输入保证金名称', trigger: 'blur'},
          ],
          promise_money: [
            {required: true, message: '请输入保证金', trigger: 'blur'},
          ],
          money: [
            {required: true, message: '请输入接单最大金额', trigger: 'blur'},
          ],
          num: [
            {required: true, message: '请输入接单最大数量', trigger: 'blur'},
          ],
        },
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader{
    border: 1px dashed #d9d9d9;
    width: 178px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
